<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
           <el-upload class="upload-demo" 
                ref="upLoadPhoto"
                action="/lejuAdmin/material/uploadFileOssSave"
                multiple
                :headers="uploadHeaders"
                :on-success="handleAvatarSuccess">
                    <el-button size="small" type="primary">点击上传素材</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
      </div>
      <div v-loading="loading">
            <el-row :gutter="20">
                <el-col :span="6" v-for="item in materialList" :key="item.id"  style="marginTop:10px">
                    <el-card :body-style="{ padding: '0px' }">
                        <div slot="header" >
                            <span>创建时间:{{item.createTime}}</span>
                        </div>
                        <div class="content" style="padding: 14px;">
                            <img style="width:100%;height:250px" :src="item.ossUrl" class="image">  
                            <div class="btn">
                            <el-button type="danger" @click="delphoto(item.id)" size="mini" class="button">删除</el-button>
                            </div>                         
                        </div>
                    </el-card>
                </el-col>
            </el-row>
      </div>
    </el-card>
      <!-- 这是分页 -->
          <div>
             <el-pagination 
              :current-page="page.start"
              :page-sizes="page.pageSizes"
              :page-size="page.limit" 
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
              @size-change="handleSizeChange"  
              @current-change="handleCurrentChange">
              </el-pagination>
          </div>
  </div>
</template>
<script>
import mix from "@/mixin/index";
import material from "@/api/content/material";
export default {
    mixins:[mix],
  data() {
    return {
        //素材列表数据
    materialList:[],
    //页码
      page:{
          //开始页
        start: 1,
        //最多几行
        limit: 5,
        //总页数
        total: 0,
        pageSizes:[5, 10, 20, 30],
      },
      //正在加载中
      loading:false,
    };
  },
  methods:{
      //素材数据
    init(){
        this.loading=true;
        material.findMaterialByPage(this.page.start,this.page.limit).then(res=>{
            console.log(res)
            this.loading=false;
            if(res.success){    
                this.page.total=res.data.total;
                this.materialList=res.data.rows;
            }else{
                this.$$message.error("请求素材数据失败");
            }
           
        })
    },
      //上传图片
    handleAvatarSuccess(res,file,fileList){
          console.log(res,file,fileList)
          if(res.success){    
            this.$refs.upLoadPhoto.clearFiles();
            this.init();
          }else{
            this.$message.error("上传失败了吧!")
          }
    },
    delphoto(id){
      this.$confirm('此操作将永久删除该素材, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          material.delMaterial(id).then(res=>{
            if(res.success){
                 this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.init();
            }else{
              this.$message.error("删除失败了")
            }
          })
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
     //每页条数pageSize 改变时会触发
    handleSizeChange(val){
      this.page.limit=val;
      this.init()
    },
    //当前页currentPage 改变时会触发
    handleCurrentChange(val){
      this.page.start=val;
      this.init()
    },
  },
  created(){
      this.init();
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/myScss";
.content{
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
   .image{
    width: 100%;
    
    }
    .btn{
      margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    } 
}

</style>